<template>
    <transition :name='transition'>
        <div class="plugin-message" v-show="show" :style='styleInfo'>
            <div class="plugin-message__inner" :class='classType'>
                <i class='iconfont' :class='classIcon'></i>
                <span class="plugin-message__text">{{text}}</span>
            </div>
        </div>
    </transition>
</template>

<script>
    import { getOS } from '../../../utils/utils'

    export default {
        data() {
            return {
                text: '',
                show:'',
                type: '',
                styleInfo: ''
            }
        },
        computed:{
            classType(){
                if(this.type == 'success'){
                    return 'component-msg--success'
                }
                if(this.type == 'error'){
                    return 'component-msg--error'
                }
                if(this.type == 'warn'){
                    return 'component-msg--warn'
                }
                if(this.type == 'info'){
                    return 'component-msg--info'
                }
                else{
                    return 'component-msg--error'
                }
            },
            classIcon(){
                if(this.type == 'success'){
                    return 'icon-tick-hollow'
                }
                if(this.type == 'error'){
                    return 'icon-close-hollow'
                }
                if(this.type == 'warn'){
                    return 'icon-warn'
                }
                if(this.type == 'info'){
                    return 'icon-info-hollow'
                }
                else{
                    return 'icon-close-hollow'
                }
            },
            transition(){
                let os = getOS()
                if(os == 'Android'){
                    return 'fade'
                }
                console.log(os)
                return 'plugin-message'
            },
        }
    }
</script>

<style lang="scss">
    @import "../../../sass/_variables";
    @import "../../../sass/_extends";
    @import "../../../sass/_mixins";

    .plugin-message{
        position: absolute;
        z-index: $zIndex_msgTip;
        pointer-events:none;
        top:50%;
        transform:translate(0,-50%);
        left: 0;
        right: 0;
        max-width:70%;
        margin: 0 auto;
        display:flex;
        justify-content:center;
        transition:all ease .3s;
    }
    .plugin-message__inner{
        padding:16px;
        min-width:65px;
        background-color: $toastColor;
        box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);
        border-radius:6px;
        // &.component-msg--success{ background-color: rgb(234, 246, 234) }
        // &.component-msg--error{ background-color: rgb(254, 233, 231) }
        // &.component-msg--warn{ background-color: rgb(255, 243, 225) }
        // &.component-msg--info{ background-color: rgb(229, 243, 254) }
        .iconfont{
            width: 36px;
            height:36px;
            font-size: 36px;
            display: block;
            margin:0 auto;
            color:#fff
        }
        .icon-tick-hollow{
            color:#fff
        }
        .icon-info-hollow{
            color:#fff
        }
        .icon-close-hollow{
            color:#fff
        }
        .icon-warn-hollow{
            color:#fff
        }
    }
    .plugin-message__text{
        display:block;
        font-size: 13px;
        font-weight: 300;
        padding-top:7px;
        text-align:center;
        line-height:1.6;
        color:#fff;
    }

    .plugin-message-enter-active, .plugin-message-leave-active{
        transition: all 150ms ease;
    }
    .plugin-message-enter, .plugin-message-leave-active {
        opacity: 0;
        transform:translate(0,-50%) scale(1.1)
    }

</style>
